Task: Revise primitive components' internal structure

[emmbm]

Task Description

We should review the structure of HTMLElements within primitive components to

• simplify their contents
• allow easier styling form parent-level invocation (see below for example structure)

For styling svelte components from parent template, we should strive for the following approach:

<!-- Some parent component or layout -->
<script lang="ts">
  import MyPrimivite from '$components/MyPrimitive.svelte';
</script>

<MyPrimitive class="scope-class global-class" />

<style>
  .scoped-class :global(global-class) {
    box-shadow: 0 0 1em 1em black;
  }
</style>

Note that this demo case uses standard style tags. But essentially the same system can be adopted using Vanilla-Extract. The main idea is to pair a scoped class with a global class to ensure the class passed through the component's props gets higher precedence than the component's inner (scoped) classes.

[emmbm]

The code proposed above does not work with svelte's own class handling. The non-global class, i.e. the .scoped-class's hashed classname from the build process, is not passed to the class prop.

The only ways around this are: 1- Wrap the targetted element with a native element that itself will be given te proper hashed classname by the compiler, or, 2- Use svelte-preprocess-cssmodules

[emmbm]

This is being done concurrently with primitive component revisions. The guideline adopted is to give a class to every primitive's main outer element and consistently name that class with a kebab-cased translation of the component's name. For example, the ButtonGroup.svelte component's outermost element has a class="button-group {className}" class attribute. Svelte-preprocess-cssmodules is used on a case-per-case basis.