Flowerparts

Svelte UI components for Flower Computer Company projects.

Install

npm install @flowercomputer/flowerparts

Import the package styles once near the root of your app:

import "@flowercomputer/flowerparts/styles.css";

Then import the components you need:

<script lang="ts">
    import { Button, Dialog, Sidebar, TextField } from "@flowercomputer/flowerparts";
</script>

Components

The package exports components, icons, helper functions, and public prop types from src/lib/index.ts.

Dialog

Dialog is a modal vessel for composing more atomic controls into a focused workflow. The component owns the native <dialog> lifecycle, overlay chrome, header, close behavior, and optional footer; callers own the form fields, grids, copy states, and submit behavior inside it.

<script lang="ts">
    import { Button, Dialog, TextField } from "@flowercomputer/flowerparts";

    let open = $state(false);
    let name = $state("");
</script>

<Button onclick={() => (open = true)}>New workspace</Button>

<Dialog bind:open title="New workspace">
    <TextField
        bind:value={name}
        autofocus
        fullWidth
        label="Tenant name"
        labelHidden
        placeholder="tenant name"
    />

    {#snippet footer({ close })}
        <Button
            variant="primary"
            disabled={!name.trim()}
            onclick={() => close()}
        >
            create
        </Button>
    {/snippet}
</Dialog>

Useful controls:

• bind:open, onOpenChange, and onClose cover controlled and local modal state.
• children, footer, headerLeft, and headerRight are snippets. The snippet props expose open, close, titleId, and contentId.
• scrim="default" is the ordinary translucent modal scrim. scrim="warning" adds low-opacity diagonal pinstripes for destructive or high-attention flows.
• closeOnScrim, closeOnEscape, closeLabel, and closeAriaLabel tune dismissal.
• Styling is token-driven through custom properties such as --dialog-inline-size, --dialog-block-start, --dialog-content-padding, --dialog-footer-padding, --dialog-scrim-background, --dialog-warning-scrim-delay, --dialog-warning-scrim-duration, --dialog-warning-scrim-easing, --dialog-warning-scrim-stripe-color, and --dialog-warning-scrim-stripe-width.

Popover

Popover is an anchored rich panel primitive. It is intentionally not a menu: use ordinary links, buttons, form fields, or custom content inside it, but do not rely on ARIA menu semantics until there is menu-style keyboard behavior.

<script lang="ts">
    import { Popover } from "@flowercomputer/flowerparts";
</script>

{#snippet trigger(props)}
    <button
        id={props.id}
        aria-controls={props["aria-controls"]}
        aria-expanded={props["aria-expanded"]}
        aria-haspopup={props["aria-haspopup"]}
        onclick={props.onclick}
    >
        Support
    </button>
{/snippet}

{#snippet content(props)}
    <a href="/docs" onclick={props.close}>Documentation</a>
{/snippet}

<Popover
    aria-label="Support"
    side="top"
    align="end"
    matchTriggerWidth
    initialFocus="first-focusable"
    {trigger}
    children={content}
/>

Useful controls:

• side, align, sideOffset, and collisionPadding position and clamp the fixed panel against the trigger.
• matchTriggerWidth makes the content width track the trigger width without consumer CSS reach-through.
• initialFocus="content" or "first-focusable" opts into focus movement when opened. By default, focus stays on the trigger.
• restoreFocus, closeOnEscape, and closeOnOutsidePointerDown tune dismissal behavior.
• aria-label, aria-labelledby, and aria-describedby label the dialog content.

SidebarItem can also describe a popover-triggering row, so footer and section item arrays stay the source of truth for row contents:

{#snippet supportPopover(props)}
    <a href="/help" onclick={props.close}>Help & Support</a>
{/snippet}

<Sidebar
    headerItems={[{ label: "Inbox", href: "/inbox" }]}
    footerItems={[
        { label: "Documentation", href: "/docs" },
        { label: "Support", popover: supportPopover },
    ]}
/>

Sidebar also exposes headerPopover and footer snippets for anchored custom content without replacing the core sidebar layout. headerPopover is pinned below the title button and receives open, close, and collapsed. Use headerHref when the header row should be a full-width navigation item instead of a popover trigger. Use headerItems for additional rows in the header area; they use the same SidebarItem shape and spacing as section and footer rows.

Development

npm install
npm run check

Public package code lives in src/lib. For visual iteration, consume the local package from an app repo and exercise components in product context.

Packaging

npm run package
npm run pack:dry-run

Publishing runs npm run check through prepublishOnly.

The package output is dist.