Keyboard nav on sheet [WIP]

v2/pink-sb/src/lib/Dialog.svelte

@@ -6,6 +6,7 @@
     import Icon from './Icon.svelte';
     import Text from './typography/Text.svelte';
     import { setContext } from 'svelte';
+    import { writable } from 'svelte/store';
 
     export let title: string;
     export let open = false;
@@ -14,7 +15,7 @@
 
     setContext('dialog-group', true);
 
-    function handleBLur(event: MouseEvent) {
+    function handleBlur(event: MouseEvent) {
         if (event.target === dialog) {
             dialog.close();
         }
@@ -36,7 +37,7 @@
     }
 </script>
 
-<svelte:window on:mousedown={handleBLur} on:keydown={handleKeydown} />
+<svelte:window on:mousedown={handleBlur} on:keydown={handleKeydown} />
 
 <dialog bind:this={dialog} on:close={() => (open = false)}>
     <section>
@@ -48,9 +49,11 @@
                         <Icon icon={IconX} />
                     </Button>
                 </Stack>
-                <Text variant="m-400" color="--fgcolor-neutral-secondary">
-                    <slot />
-                </Text>
+                <div class="dialog-content">
+                    <Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        <slot />
+                    </Text>
+                </div>
             </header>
             <footer>
                 <slot name="footer">
@@ -107,6 +110,10 @@
                 border-bottom: var(--border-width-s) solid var(--border-neutral);
                 background: var(--bgcolor-neutral-primary);
                 padding-block-start: var(--space-7);
+
+                & .dialog-content {
+                    width: 100%;
+                }
             }
         }
 

v2/pink-sb/src/lib/Fieldset.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
+    import Badge from './Badge.svelte';
+    import Stack from './layout/Stack.svelte';
+
     export let legend: string;
+    export let badge: string | undefined = undefined;
+    export let badgeVariant: 'primary' | 'secondary' | 'accent' = 'secondary';
 </script>
 
 <fieldset>
-    <legend><span>{legend}</span></legend>
+    <legend>
+        <span>
+            <Stack inline direction="row" alignItems="center" gap="xxs">
+                <span class="legend-text">{legend}</span>
+                {#if badge}
+                    <Badge content={badge} variant={badgeVariant} size="xs" />
+                {/if}
+            </Stack>
+        </span>
+    </legend>
     <div class="content"><slot /></div>
 </fieldset>
 
@@ -20,8 +34,7 @@
         margin-left: var(--space-6, 12px);
     }
 
-    span {
-        padding: 0 var(--space-2, 4px);
+    .legend-text {
         font-family: var(--font-family-sansserif);
         font-size: var(--font-size-xs, 12px);
         font-style: normal;

v2/pink-sb/src/lib/Logs.svelte

@@ -286,21 +286,28 @@
             color: var(--fgcolor-neutral-primary);
             font-family: var(--font-family-code), var(--mono-fallbacks);
             font-size: var(--font-size-xs);
-            white-space: pre;
+            white-space: pre-wrap;
+            word-break: break-word;
+            overflow-wrap: break-word;
             line-height: 140%;
             letter-spacing: 0;
             max-height: 600px;
             width: 100%;
             overflow-y: scroll;
-            overflow-x: hidden;
+            overflow-x: auto;
             display: flex;
             flex-direction: column;
             padding: var(--space-6);
-            white-space: pre-line;
             scroll-behavior: smooth;
             height: var(--p-height);
             min-height: 10px;
 
+            code {
+                white-space: pre-wrap;
+                word-break: break-word;
+                overflow-wrap: break-word;
+            }
+
             &.full-height {
                 min-height: 300px;
                 max-height: none;

v2/pink-sb/src/lib/Popover.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
-    import { hasContext, tick } from 'svelte';
     import { activePopover } from './context.js';
     import type { Placement } from '@floating-ui/dom';
+    import { onMount, hasContext, setContext, tick } from 'svelte';
     import { computePosition, autoUpdate, shift, offset, flip } from '@floating-ui/dom';
 
     export let portal: boolean = false;
@@ -107,6 +107,10 @@
             return { destroy: cleanup };
         });
     }
+
+    setContext('popover-group', true);
+
+    onMount(() => autoUpdate(referenceElement, tooltipElement, update));
 </script>
 
 <svelte:window on:click={onBlur} on:keydown={onKeyDown} on:resize={update} />

v2/pink-sb/src/lib/Tooltip.svelte

@@ -1,26 +1,48 @@
 <script lang="ts">
-    import { tick } from 'svelte';
+    import { tick, hasContext } from 'svelte';
     import type { Placement } from '@floating-ui/dom';
     import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 
+    export let portal: boolean = false;
     export let placement: Placement | undefined = undefined;
     export let padding: 'none' | 'm' = 'm';
     export let offsetAmount: number = 6;
     export let disabled = false;
     export let maxWidth = '11.25rem';
+    export let delay: number = 0;
 
     let show = false;
     let showing = false;
-    const id = 'tooltip-' + Math.random().toString(36).substring(2, 9);
-    let referenceElement: HTMLSpanElement;
+    let delayTimeout: ReturnType<typeof setTimeout>;
+
     let tooltipElement: HTMLDivElement;
+    let referenceElement: HTMLSpanElement;
+    const id = 'tooltip-' + Math.random().toString(36).substring(2, 9);
+
+    const inDialogGroup = hasContext('dialog-group');
 
     async function showTooltip() {
-        await update();
-        showing = show = !disabled;
+        if (disabled) return;
+
+        if (delayTimeout) {
+            clearTimeout(delayTimeout);
+        }
+
+        if (delay > 0) {
+            delayTimeout = setTimeout(async () => {
+                await update();
+                showing = show = true;
+            }, delay);
+        } else {
+            await update();
+            showing = show = true;
+        }
     }
 
     function hideTooltip() {
+        if (delayTimeout) {
+            clearTimeout(delayTimeout);
+        }
         show = false;
     }
 
@@ -43,6 +65,27 @@
         });
     }
 
+    function portalPopover(node: HTMLElement) {
+        if (!portal && !inDialogGroup) return;
+
+        const target = !inDialogGroup
+            ? document.body
+            : // can be inside a modal/dialog
+              document.body.querySelector<HTMLDialogElement>('dialog[open]');
+
+        if (target) {
+            target.appendChild(node);
+        }
+
+        return {
+            destroy() {
+                if (target && node.parentNode === target) {
+                    target.removeChild(node);
+                }
+            }
+        };
+    }
+
     function fadeSlide(_: Node, { y = 8, duration = 200 } = {}) {
         return {
             duration,
@@ -83,6 +126,7 @@
         {id}
         transition:fadeSlide
         use:autoUpdateAction
+        use:portalPopover
         on:transitionend={() => (showing = false)}
         bind:this={tooltipElement}
         aria-hidden={!show}

v2/pink-sb/src/lib/index.ts

@@ -53,3 +53,4 @@ export { default as InlineInput } from './lab/InlineInput.svelte';
 export { default as Sonner } from './lab/Sonner.svelte';
 export { default as Logs } from './Logs.svelte';
 export { default as Spreadsheet } from './spreadsheet/index.js';
+export * from './spreadsheet/index.js';

v2/pink-sb/src/lib/input/Select.svelte

@@ -48,6 +48,7 @@
 
     const dispatch = createEventDispatcher();
     const inDialogGroup = hasContext('dialog-group');
+    const inPopoverGroup = hasContext('popover-group');
 
     const {
         elements: { trigger, menu, option },
@@ -65,7 +66,7 @@
             sameWidth: true
         },
         preventScroll: false,
-        portal: inDialogGroup ? 'dialog[open]' : null,
+        portal: inDialogGroup ? 'dialog[open]' : inPopoverGroup ? 'body' : null,
         onSelectedChange(event) {
             value = event.next?.value;
             dispatch('change', value);
@@ -90,7 +91,7 @@
     <button
         {...$trigger}
         use:trigger
-        class="input"
+        class="input selects"
         class:disabled
         class:readonly
         class:placeholder={!selectedLabel}

v2/pink-sb/src/lib/input/Textarea.svelte

@@ -64,6 +64,7 @@
                 <Nullable bind:disabled bind:value />
             {/if}
         </Layout.Stack>
+        <slot name="end"></slot>
     </div>
 </Base>
 

v2/pink-sb/src/lib/selector/Checkbox.svelte

@@ -23,6 +23,10 @@
             checked = !checked;
         }
     }
+
+    export function blur() {
+        element.blur();
+    }
 </script>
 
 <Base {label} {id} {description}>