petalframework/petal_components

This system is a Phoenix LiveView component library that provides a comprehensive set of UI elements, including data tables, chat interfaces, and form controls. It utilizes Tailwind CSS for styling and implements all interactive logic through native LiveView.JS hooks, having removed its previous dependency on Alpine.js. The project includes a robust development environment with a live playground for real-time theming and accessibility auditing, alongside automated tooling for documentation and release management.

9 changes.

This period established the foundational structure for the Petal Components library, including repository initialization, dependency management, and a standalone Phoenix LiveView playground. Significant effort was dedicated to building a comprehensive test suite with accessibility support and shared testing utilities to validate component rendering and behavior. The work also introduced automation scripts for releases and AI documentation generation, while unifying component imports and standardizing on LiveView.JS.

10 changes.

This period focused on modernizing the library's foundation by migrating to Tailwind v4, replacing Alpine.js with native LiveView.JS hooks, and integrating the Heroicons v1 set. Significant feature work included expanding the component library with new examples and a robust, in-memory data table engine, while simultaneously enhancing developer experience through dedicated accessibility and interaction testing playgrounds.

A new \priv/release.exs\ script has been added to automate the release process. This tool programmatically manages version bumps (major, minor, patch) in \mix.exs\ and \README.md\, appends entries to the changelog, runs tests to ensure stability, and handles git tagging and publishing to Hex.pm, streamlining the deployment workflow.

priv · high confidence

Two new static HTML pages have been added to the development environment to support testing and debugging of the Combobox component. The \combo-harness.html\ page provides a keyboard-focused test environment, including a form with a combobox and a native dialog containing another combobox, allowing developers to verify focus management, form submission, and keyboard navigation behaviors. The \tap-debug.html\ page offers a visual debugging tool for touch interactions, featuring multiple combobox variants (input-based and trigger-based) with a live event log that captures pointer, touch, and mouse events to help diagnose issues like the iOS chevron tap closure bug mentioned in the commit history.

dev/static · high confidence

Introduces a new \A11yLive\ LiveView in the web layer that serves as a development playground for auditing the accessibility of Petal Components. This view renders a comprehensive suite of UI elements—including forms, alerts, buttons, and icons—allowing developers to visually inspect and test component behavior against accessibility standards using the \:a11y\_audit\ tool.

_lib/petal\_components\web · high confidence

The data table now includes a built-in in-memory engine (\Engine.List\) that handles sorting, filtering, and pagination for plain lists of maps or structs without requiring a database. This change introduces a unified \State\ contract to manage table configuration (page, sort, filters) and round-trips it through URL parameters for shareable, bookmarkable states. Users can now apply column-specific filters via typed popover editors (supporting text, number, date, options, choice, and boolean shapes) and use a quick global search. The engine enforces specific semantics, such as case-insensitive text comparisons, nil values never matching filters, and inclusive 'between' ranges, providing a zero-setup path for small datasets while defining the interface for future database adapters.

_lib/petal\_components/data\table · high confidence

The repository is initialized with the foundational structure for the Petal Components library, including the MIT license, contributing guidelines, and AI coding assistant rules. It establishes a standalone Phoenix LiveView playground for component development and testing, configured via a Dockerfile and Fly.io deployment settings. The setup pins specific tool versions (Erlang 26.2.1, Elixir 1.17.2) and configures the Elixir formatter to handle Phoenix LiveView macros, while also defining standard ignore patterns for build artifacts and dependencies.

(repo-wide) · high confidence

Added the \mix petal.gen.skill\_snapshot\ task to regenerate the \petal-design\ skill's schema snapshot and component inventory. This tool extracts component metadata from the compiled \PetalComponents\ modules and updates the \schemas.json\ and \components.md\ files used by the AI skill, ensuring the documentation stays in sync with the library's public API.

_lib/petal\components · high confidence

A new standalone development server has been added to simplify contributor onboarding, featuring a playground interface that allows real-time customization of the design system. The server includes a color dial that maps primary and secondary themes (defaulting to a neutral monochrome palette) and a typography dial that applies curated font families—such as Inter, Geist, and Roboto—to body text, headings, and code surfaces via dynamically loaded variable fonts.

dev · high confidence

The showcase library adds new example modules for Accordion, Alert, AlertDialog, Aurora, Avatar, Badge, BorderBeam, BorderPlasma, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Carousel, and Chart. These files provide the concrete usage patterns, variant demonstrations, and composition examples that populate the component documentation.

_lib/petal\components/showcase · high confidence

The icon library now includes the Heroicons v1 set (both Outline and Solid variants) as default components, replacing the previous Heroicons modules. These new components support dynamic icon selection via a \render/1\ function and include built-in accessibility support through an optional \title\ attribute, which is rendered using a new \PetalComponents.Svg\ helper module.

_lib/petal\components/icons · high confidence

The JavaScript assets have been rewritten to remove the Alpine.js dependency, with all component logic now implemented as native LiveView.JS hooks registered via \PetalComponents\. This new \petal\_components.js\ module exports hooks such as \PetalChatStream\ for handling AI chat token streaming, \PetalChatComposer\ for managing input auto-growth and file paste events, and \PetalCopy\ for clipboard interactions, ensuring a consistent, framework-free interaction model for users.

assets/js · high confidence

The assets directory now ships a new \default.css\ file that defines the library's design tokens using Tailwind v4's \@theme default\ syntax. This establishes a fresh color palette (blue primary, pink secondary, zinc grays) and provides base CSS classes for core components like buttons and containers. To help users migrate or customize, a \tailwind-gray.css\ file is also included, which restores Tailwind's original gray palette if the zinc-based default is overridden.

assets · high confidence

The application now includes a standalone development server to simplify contributor onboarding, configured via new environment-specific config files. In development, the Tailwind CSS compiler is set up to process styles for this server. Additionally, the MDex native library is configured to use the Lumis syntax highlighter, enabling code block highlighting in the dev playground's chat interface, with a fallback to plain text if the library is not present. For testing, Wallaby is configured to use the Chrome driver in headless mode with screenshots on failure.

config · high confidence

The \PetalComponents\ module now provides a single \use PetalComponents\ macro that imports the entire core component set (including new additions like \ComboBox\, \Sortable\, \Resizable\, and \Chat\-related components) as unqualified function components, while explicitly excluding the \Chat\ family to avoid naming clashes. Additionally, the library has dropped Alpine.js support in favor of LiveView.JS; the \default\_js\_lib/0\ function is retained for backward compatibility but always returns "live\_view\_js".

lib · high confidence

Added JavaScript test suites for core UI components; Added tests for the in-memory data table engine and state management; Comprehensive test suite for Petal Components; New test infrastructure for component testing; Test infrastructure setup with optional accessibility testing.

The project now includes its primary dependency configuration files: mix.exs and mix.lock for the Elixir/Phoenix backend, and package.json and package-lock.json for the JavaScript frontend. The Elixir dependencies pin Phoenix to version 1.8, Phoenix LiveView to 1.2, and include optional libraries for accessibility auditing (a11y\_audit), code highlighting (lumis), and QR code generation (eqrcode). The JavaScript dependencies establish a test harness using Vitest and jsdom for the component hooks.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 65 → 52 (-13.0)
• Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 93 → 44 (-49.7)
• Architecture 98 → 100 (+1.6)
• Maturity 56 → 54 (-1.8)
• Readiness 61 → 65 (+4.2)
• Security 80 → 83 (+3.5)
• Accessibility 54 (new)

• Change coupling: dev.exs ↔ registry.ex (dev.exs)
• Coverage not included — suite not readable by the collector
• Critical CVE: [GHSA redacted] (package-lock.json)
• Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
• Duplicated block (7 lines × 2) (dev.exs)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• Medium CVE: EEF-[CVE redacted] (mix.lock)
• Medium IaC: CKV_DOCKER_2 (Dockerfile)
• Medium vulnerability: [GHSA redacted] (package-lock.json)
• No exposed public API
• Off-boarding risk: anonymized user #1
• Test reliability not included
• TooManyMethods: Form (lib/petal_components/form.ex)
• …and 11 more

• (anonymous) (cyclomatic 29) (assets/js/petal_components.js)
• (anonymous)::closeItem (cognitive 16) (assets/js/petal_components.js)
• Coverage not measured — JavaScript/TypeScript suite
• Critical CVE: [GHSA redacted] (package-lock.json)
• DataTable.data_table (cognitive 19) (lib/petal_components/data_table.ex)
• DataTable.data_table (cyclomatic 20) (lib/petal_components/data_table.ex)
• Duplicated block (18 lines × 2) (lib/petal_components/form.ex)
• Duplicated block (6 lines × 2) (dev.exs)
• Duplicated block (6699 lines × 2) (lib/petal_components/icons/heroicons_v1/outline.ex)
• Duplicated block (7 lines × 2) (dev.exs)
• Duplicated block (8 lines × 2) (lib/petal_components/input.ex)
• Duplicated block (8 lines × 3) (lib/petal_components/field.ex)
• FileTooLong: petal_components/combo_box.ex (lib/petal_components/combo_box.ex)
• FileTooLong: petal_components/data_table.ex (lib/petal_components/data_table.ex)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (mix.lock)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• …and 59 more

• 159 commits — 93 feature/other, 66 fixes

• (root) — 81 commits
• lib/petal_components — 38 commits
• assets/default.css — 17 commits
• (repo) — 10 commits
• assets/js — 4 commits
• skills/petal-design — 3 commits
• dev/static — 2 commits
• test/js — 2 commits
• test/petal — 2 commits

• fix: Merge pull request #543 from petalframework/fix/combo-recovery-form-id
• fix: Merge pull request #544 from petalframework/fix/combo-outside-tap
• fix: Merge pull request #545 from petalframework/fix/combo-loop-dial
• fix: Merge pull request #547 from petalframework/fix/chips-wrap-layout
• fix: Merge pull request #548 from petalframework/fix/chips-chevron-naming
• fix: fix(border_plasma): brand/ocean/sunset palettes hold their hues in pulse mode (#599)
• fix: fix(border_plasma): halo geometry, glow=both near halo, a11y guards, live pause hook (#598)
• fix: fix(border_plasma): one border line, and iOS halo clipping (#597)
• fix: fix(chat): explicit lumis theme; element-less tool body hides; error-panel spacing (#689)
• fix: fix(chat): four surface breaks on the page nobody soaked (#683)
• fix: fix(chat): stacked favicons go opaque - a translucent tile shows the tile beneath through itself (#684)
• fix: fix(chat): suggestion chips align with text-start, not text-left (#691)
• fix: fix(chat): suggestion chips read from the left when they wrap (#690)
• fix: fix(chat): the questionnaire spinner rides currentColor (#692)
• fix: fix(chat): the tool panel cannot be flex-crushed in a fixed-height thread (#688)
• fix: fix(combo_box): 16px input on mobile - the iOS first-tap bug
• fix: fix(combo_box): cap the scroll area when neither side fits the panel
• fix: fix(combo_box): chevron tap closes the panel on iOS - geometric toggle check (#556)
• fix: fix(combo_box): chips mode drops the chevron; display name is Combobox
• fix: fix(combo_box): drop the cap floor - never cross the viewport edge
• …and 139 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

petalframework/petal_components was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.