Make KERN UX components compatible with Drupal Canvas

Problem/Motivation

Drupal Canvas is now the primary visual page builder in Drupal CMS, enabling site builders to drag and drop Single Directory Components (SDCs) directly into pages. Currently, KERN UX components are not explicitly declared as Canvas-compatible, which means site builders cannot discover or use them inside the Canvas UI.

As the Drupal ecosystem accelerates toward component-based visual building with Canvas, design systems like KERN UX should ensure their components are first-class citizens in that environment.

Proposed resolution

Audit all existing KERN UX SDC components and update their .component.yml metadata to ensure full compatibility with Drupal Canvas. This includes:

• Verifying and properly defining all props in the component YAML schema so Canvas can render the editing form for each component
• Ensuring component slots, variants, and CSS/JS assets are correctly declared
• Adding canvas-compatible prop types (e.g. string, boolean, uri, text) where missing or incorrect
• Testing each component inside a Drupal Canvas environment to confirm they appear in the component picker and behave correctly when configured via the Canvas UI
• Optionally, adding a preview image or description per component to improve discoverability inside Canvas