@canonical/svelte-ds-app-launchpad

Launchpad-specific components for the Pragma design system. This package provides Svelte UI components for the Launchpad application.

Installation

bun add @canonical/svelte-ds-app-launchpad

Import the main styles in your project's layout file (e.g. routes/+layout.svelte):

<script lang="ts">
	import "@canonical/svelte-ds-app-launchpad/styles.css";

	import "@canonical/launchpad-design-tokens/dist/css/dimension/responsive.css";
	import "@canonical/launchpad-design-tokens/dist/css/typography/responsive.css";
	import "@canonical/launchpad-design-tokens/dist/css/opacity/opacity.css";
	import "@canonical/launchpad-design-tokens/dist/css/transition/preferred.css";
	import "@canonical/launchpad-design-tokens/dist/css/color/light.css"; // dark.css or system.css
</script>

Usage

<script lang="ts">
  import { Chip } from "@canonical/svelte-ds-app-launchpad";
</script>

<Chip lead="Hello" value="world!" />

Dependency notes

This section documents non-trivial runtime dependencies in this package.

| Dependency | Purpose | Rationale | Long-term Plan | Current Status | | ---------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @floating-ui/dom | Positions floating elements (e.g. popovers, tooltips) consistently across browsers. | Native CSS anchored positioning support for position-area and position-try-fallbacks is still maturing, so @floating-ui/dom provides a reliable cross-browser fallback today. It also has 0 external dependencies and is maintained by the original authors of Popper.js. | Revisit as native support improves. | |

Development

Note: Testing requires Playwright; see the Testing section below.

# Run checks
bun run check

# Run tests
bun run test

To run the full test suite (temporary workaround until Playwright is supported in Pragma):

bun run test:client && bun run test:ssr && bun run test:server

Testing

Tests use Vitest browser mode, which requires Playwright. This setup is currently experimental in Pragma.

One-time setup (install Playwright browsers):

bunx playwright install

License

LGPL-3.0