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 {
        Billing,
        Bogs,
        BreadcrumbHeader,
        Button,
        Coin,
        FlowerMark,
        Gear,
        GitHubIcon,
        GoogleIcon,
        Key,
        Overview,
        Palm,
        Person,
        Popover,
        Repl,
        Sidebar,
        SidebarIcon,
        Sliders,
        Team,
        Usage,
    } from "@flowercomputer/flowerparts";
</script>

Components

• Button
• Billing
• Bogs
• BreadcrumbHeader
• Coin
• FlowerMark
• Gear
• GitHubIcon
• GoogleIcon
• Key
• Overview
• Palm
• Person
• Placeholder
• Popover
• Repl
• Sidebar
• SidebarIcon
• Sliders
• Team
• Usage

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
    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.

Development

npm install
npm run dev

The Astro site in src/pages is the local component catalog. Public package code lives in src/lib.

Packaging

npm run package
npm run lint:package
npm run pack:dry-run

Publishing runs the package build, package lint, and Astro build through prepublishOnly.

The package output is dist; the Astro catalog builds to site so the two outputs do not overwrite each other.