Feat: Spreadsheet

v2/pink-sb/.storybook/main.js

@@ -1,4 +1,7 @@
 import { dirname, join } from 'path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 /** @type { import('@storybook/sveltekit').StorybookConfig } */
 const config = {

v2/pink-sb/package.json

@@ -4,7 +4,7 @@
     "scripts": {
         "dev": "storybook dev -p 6006",
         "dev:package": "svelte-kit sync && svelte-package --watch",
-        "build": "vite build && pnpm run package && pnpm run sb:build",
+        "build": "vite build && pnpm run package",
         "preview": "vite preview",
         "package": "svelte-kit sync && svelte-package && publint",
         "prepublishOnly": "pnpm run package",

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

@@ -48,9 +48,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 +109,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/Popover.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition';
     import { activePopover } from './context.js';
     import type { Placement } from '@floating-ui/dom';
-    import { onMount, hasContext, setContext } from 'svelte';
+    import { onMount, hasContext, setContext, tick } from 'svelte';
     import { computePosition, autoUpdate, shift, offset, flip } from '@floating-ui/dom';
 
     export let portal: boolean = false;
@@ -17,6 +18,8 @@
 
     $: showTooltip = $activeInstance === id;
 
+    setContext('popover-group', true);
+
     function toggle(e?: Event) {
         return tooltipAction(e, 'toggle');
     }
@@ -60,10 +63,12 @@
 
     async function update() {
         if (!referenceElement || !tooltipElement) return;
+
         const firstChild = referenceElement.firstElementChild;
         if (!(firstChild instanceof HTMLElement)) {
             return;
         }
+
         const { x, y } = await computePosition(firstChild, tooltipElement, {
             placement,
             middleware: [offset(2), flip(), shift()]
@@ -96,27 +101,42 @@
         };
     }
 
-    setContext('popover-group', true);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function autoUpdateAction(_: HTMLDivElement) {
+        let cleanup: (() => void) | undefined;
 
-    onMount(() => autoUpdate(referenceElement, tooltipElement, update));
+        tick().then(() => {
+            if (!referenceElement || !tooltipElement) return;
+            cleanup = autoUpdate(referenceElement, tooltipElement, update);
+        });
+
+        return {
+            destroy: () => cleanup?.()
+        };
+    }
 </script>
 
 <svelte:window on:click={onBlur} on:keydown={onKeyDown} on:resize={update} />
 
 <span aria-describedby={id} bind:this={referenceElement}>
     <slot showing={showTooltip} {toggle} {update} {show} {hide} />
 </span>
-<div
-    {id}
-    role="tooltip"
-    aria-hidden={!showTooltip}
-    bind:this={tooltipElement}
-    class:padding-m={padding === 'm'}
-    class:padding-none={padding === 'none'}
-    use:portalPopover
->
-    <slot showing={showTooltip} {toggle} {update} {show} {hide} name="tooltip" />
-</div>
+
+{#if showTooltip}
+    <div
+        {id}
+        role="tooltip"
+        aria-hidden="false"
+        bind:this={tooltipElement}
+        class:padding-m={padding === 'm'}
+        class:padding-none={padding === 'none'}
+        use:portalPopover
+        use:autoUpdateAction
+        transition:fade={{ duration: 150 }}
+    >
+        <slot showing={showTooltip} {toggle} {update} {show} {hide} name="tooltip" />
+    </div>
+{/if}
 
 <style lang="scss">
     span {

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

@@ -1,34 +1,59 @@
 <script lang="ts">
+    import { tick, hasContext } from 'svelte';
     import type { Placement } from '@floating-ui/dom';
     import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-    import { onMount } from 'svelte';
 
+    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;
     }
 
     async function update() {
+        if (!referenceElement || !tooltipElement) return;
+
         const firstChild = referenceElement.firstElementChild;
         if (!(firstChild instanceof HTMLElement)) {
             return;
         }
+
         const { x, y } = await computePosition(firstChild, tooltipElement, {
             placement,
             middleware: [offset(offsetAmount), flip(), shift()]
@@ -40,7 +65,50 @@
         });
     }
 
-    onMount(() => autoUpdate(referenceElement, tooltipElement, update));
+    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,
+            css: (time: number) => `
+                opacity: ${time};
+                transform: translateY(${(1 - time) * y}px);
+             `
+        };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function autoUpdateAction(_: HTMLDivElement) {
+        let cleanup: (() => void) | undefined;
+
+        tick().then(() => {
+            if (!referenceElement || !tooltipElement) return;
+            cleanup = autoUpdate(referenceElement, tooltipElement, update);
+        });
+
+        return {
+            destroy: () => cleanup?.()
+        };
+    }
 </script>
 
 <svelte:window on:resize={update} />
@@ -57,19 +125,25 @@
 >
     <slot {showing} {update} />
 </span>
-<div
-    {id}
-    on:transitionend={() => (showing = false)}
-    bind:this={tooltipElement}
-    aria-hidden={!show}
-    class:padding-none={padding === 'none'}
-    class:padding-m={padding === 'm'}
-    role="tooltip"
-    style:max-inline-size={maxWidth}
-    data-state={!show ? 'closed' : 'open'}
->
-    <slot {showing} {update} name="tooltip" />
-</div>
+
+{#if show}
+    <div
+        {id}
+        transition:fadeSlide
+        use:autoUpdateAction
+        use:portalPopover
+        on:transitionend={() => (showing = false)}
+        bind:this={tooltipElement}
+        aria-hidden={!show}
+        class:padding-none={padding === 'none'}
+        class:padding-m={padding === 'm'}
+        role="tooltip"
+        style:max-inline-size={maxWidth}
+        data-state={!show ? 'closed' : 'open'}
+    >
+        <slot {showing} {update} name="tooltip" />
+    </div>
+{/if}
 
 <style lang="scss">
     [role='note'] {
@@ -88,7 +162,6 @@
         color: var(--fgcolor-on-invert);
         visibility: hidden;
         opacity: 0;
-        transition: visibility 0s linear 0.2s;
         z-index: 9002;
 
         &[aria-hidden='false'] {
@@ -104,34 +177,5 @@
                 padding: var(--space-2) var(--space-4);
             }
         }
-
-        &[data-state='open'] {
-            animation: pink-tooltip-enter 0.2s ease-out;
-        }
-
-        &[data-state='closed'] {
-            animation: pink-tooltip-exit 0.2s ease-out;
-        }
-    }
-    @keyframes pink-tooltip-enter {
-        from {
-            opacity: 0;
-            transform: translateY(0.5rem);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes pink-tooltip-exit {
-        from {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        to {
-            opacity: 0;
-            transform: translateY(0.5rem);
-        }
     }
 </style>

v2/pink-sb/src/lib/action-menu/Input.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { Divider } from '../index.js';
+    import { autofocusInput } from '$lib/input/autofocus.js';
+    import type { HTMLInputAttributes } from 'svelte/elements';
+
+    type $$Props = HTMLInputAttributes & {
+        autofocus?: boolean;
+    };
+
+    export let value: $$Props['value'] = '';
+    export let type: $$Props['type'] = 'text';
+    export let disabled: $$Props['disabled'] = false;
+    export let readonly: $$Props['readonly'] = false;
+    export let required: $$Props['required'] = false;
+    export let maxlength: $$Props['maxlength'] = undefined;
+    export let id: $$Props['id'] = undefined;
+    export let autofocus: $$Props['autofocus'] = false;
+</script>
+
+<div class="input-text-wrapper">
+    <input
+        bind:value
+        {...{ type }}
+        {disabled}
+        {readonly}
+        {required}
+        {maxlength}
+        {id}
+        {...$$restProps}
+        use:autofocusInput={autofocus}
+    />
+
+    <Divider />
+</div>
+
+<style lang="scss">
+    .input-text-wrapper {
+        padding-block-end: 0.5rem;
+
+        & input {
+            padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
+
+            inline-size: 100%;
+            line-height: 140%;
+
+            &:disabled {
+                color: var(--fgcolor-neutral-tertiary);
+            }
+
+            &::placeholder {
+                color: var(--fgcolor-neutral-tertiary);
+            }
+
+            &:is(:-webkit-autofill, :autofill) {
+                -webkit-background-clip: text;
+            }
+
+            &::-webkit-calendar-picker-indicator {
+                filter: invert(0.5);
+            }
+        }
+    }
+</style>