lutra 0.1.68 → 0.1.70

package/dist/components/MenuItem.svelte

@@ -3,6 +3,17 @@
     import MenuItemContent from "./MenuItemContent.svelte";
 	import type { MenuItem as Item } from "./MenuTypes.js";
 
+    /**
+     * @description
+     * A single menu item within a menu list. Supports item, header, text, and divider types.
+     * Items can be links, buttons, or custom rendered content. Keyboard navigation is handled by the parent MenuDropdown.
+     * @cssprop --menu-item-font-size - Font size of the menu item. (Default: var(--font-size-sm))
+     * @cssprop --menu-item-padding-block - Block padding of the menu item. (Default: var(--space-xs))
+     * @cssprop --menu-item-padding-inline - Inline padding of the menu item. (Default: var(--space-md))
+     * @cssprop --menu-item-gap - Gap between icon and text within the item. (Default: var(--space-sm))
+     * @cssprop --menu-item-margin - Top margin of the first item. (Default: var(--space-xs))
+     * @cssprop --menu-shortcut-font-size - Font size of the keyboard shortcut label. (Default: max(0.75em, 9px))
+     */
     let {
         item,
         index,
@@ -11,11 +22,17 @@
         keyboardHasFocus,
         shape = 'default',
     }: {
+        /** The menu item data object. */
         item: Item;
+        /** The index of this item in the menu list. */
         index: number;
+        /** Callback when the mouse enters the item. */
         onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+        /** Callback when the item is selected. */
         onselect?: (item: Item, index: number) => void;
+        /** Whether keyboard navigation is active, suppressing mouse hover styles. */
         keyboardHasFocus?: boolean;
+        /** The border-radius shape of the item. */
         shape?: 'default' | 'rounded' | 'pill';
     } = $props();
 
@@ -104,20 +121,19 @@
     li .Item,
     li .Header,
     li .Text {
-        font-size: var(--font-size, 0.9em);
+        font-size: var(--menu-item-font-size, var(--font-size-sm));
         text-align: left;
-        padding-block: 0.5rem;
-        padding-inline: 1rem;
+        padding-block: var(--menu-item-padding-block, var(--space-xs));
+        padding-inline: var(--menu-item-padding-inline, var(--space-md));
         display: inline-flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        color: inherit;
         text-decoration: none;
         color: var(--color);
-        --inset-block: 0.5rem;
-        --inset-inline: 1rem;
-        border-radius: none;
+        --inset-block: var(--menu-item-padding-block, var(--space-xs));
+        --inset-inline: var(--menu-item-padding-inline, var(--space-md));
+        border-radius: 0;
         white-space: nowrap;
     }
 
@@ -128,7 +144,7 @@
     }
 
     li .Header {
-        font-weight: 600;
+        font-weight: var(--font-weight-medium);
     }
 
     li:not(.keyboardHasFocus) .Item:not(.Custom):hover,
@@ -146,7 +162,7 @@
     }
 
     li .Item span.Shortcut {
-        font-size: max(0.75em, 9px);
+        font-size: var(--menu-shortcut-font-size, max(0.75em, 9px));
         text-align: right;
         color: var(--menu-text-color-subtle);
         white-space: nowrap;
@@ -157,23 +173,23 @@
     }
 
     li.divider {
-        padding-block: 0.5rem;
+        padding-block: var(--menu-item-padding-block, var(--space-xs));
     }
 
     hr {
         display: block;
         border: none;
         margin: 0;
-        border-top: 1px solid var(--menu-border-color);
+        border-top: var(--menu-border-size) var(--menu-border-style) var(--menu-border-color);
     }
 
     li:first-child[data-type="item"] {
-        margin-block-start: var(--menu-item-margin, 0.5rem);
+        margin-block-start: var(--menu-item-margin, var(--space-xs));
     }
 
-    @media (pointer: none) {
+    @media (pointer: coarse) {
         li .Item span.Shortcut {
             display: none;
-        }        
+        }
     }
 </style>

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

@@ -1,10 +1,16 @@
 import type { MenuItem as Item } from "./MenuTypes.js";
 type $$ComponentProps = {
+    /** The menu item data object. */
     item: Item;
+    /** The index of this item in the menu list. */
     index: number;
+    /** Callback when the mouse enters the item. */
     onmouseover?: (e: MouseEvent, item: Item, index: number) => void;
+    /** Callback when the item is selected. */
     onselect?: (item: Item, index: number) => void;
+    /** Whether keyboard navigation is active, suppressing mouse hover styles. */
     keyboardHasFocus?: boolean;
+    /** The border-radius shape of the item. */
     shape?: 'default' | 'rounded' | 'pill';
 };
 declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Modal.svelte

@@ -5,30 +5,20 @@
     import type { ModalButton } from "./ModalTypes.js";
 
     /**
-     * A modal component using the native `<dialog>` element.
-     * 
-     * **Pattern A: Trigger-based**
-     * ```svelte
-     * <Modal {trigger} {content} />
-     * ```
-     * 
-     * **Pattern B: Controlled state**
-     * ```svelte
+     * @description
+     * A modal component using the native `<dialog>` element. Supports trigger-based, controlled, and auto-show patterns.
+     * Uses modal tokens for styling. The `contained` prop can be set via context.
+     * @cssprop --modal-width - Width of the modal. (Default: fit-content)
+     * @cssprop --modal-min-width - Minimum width. (Default: auto)
+     * @cssprop --modal-max-width - Maximum width. (Default: 40rem)
+     * @cssprop --modal-max-height - Maximum height. (Default: 80svh)
+     * @example
      * <Modal bind:open={showModal}>
      *     {#snippet content(close)}
      *         <p>Modal content</p>
+     *         <button onclick={close}>Close</button>
      *     {/snippet}
      * </Modal>
-     * ```
-     * 
-     * **Pattern C: Auto-show (no trigger)**
-     * ```svelte
-     * {#if shouldShow}
-     *     <Modal open onclose={() => shouldShow = false}>
-     *         {#snippet content(close)}...{/snippet}
-     *     </Modal>
-     * {/if}
-     * ```
      */
     let {
         open = $bindable(false),
@@ -241,6 +231,31 @@
     dialog.Modal[open] {
         display: grid;
         grid-template-rows: 1fr auto;
+        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,
+            overlay var(--transition-duration-fast) allow-discrete;
+    }
+
+    dialog.Modal[open]::backdrop {
+        opacity: 1;
+        transition:
+            opacity var(--transition-duration-fast) ease-out,
+            display var(--transition-duration-fast) allow-discrete,
+            overlay var(--transition-duration-fast) allow-discrete;
+    }
+
+    @starting-style {
+        dialog.Modal[open] {
+            opacity: 0;
+            translate: 0 var(--space-xs);
+        }
+        dialog.Modal[open]::backdrop {
+            opacity: 0;
+        }
     }
 
     dialog.Modal.contained {
@@ -306,7 +321,8 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-        dialog.Modal {
+        dialog.Modal,
+        dialog.Modal::backdrop {
             transition: none;
         }
     }

package/dist/components/Popover.svelte

@@ -1,10 +1,27 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { BROWSER } from "esm-env";
+	import UIContent from "./UIContent.svelte";
 
 	/**
-	 * 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),
@@ -191,7 +208,9 @@
 	class:unstyled
 	style={popoverStyle}
 >
-	{@render children()}
+	<UIContent>
+		{@render children()}
+	</UIContent>
 </div>
 
 <style>
@@ -218,23 +237,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>