feat: allow customizing Label component, add Em and Strong elemental components

Author: hperrin

packages/common/CommonLabel.svelte

@@ -1,7 +1,7 @@
-<span
+<svelte:component
+  this={component}
   bind:this={element}
-  use:useActions={use}
-  use:forwardEvents
+  use={[forwardEvents, ...use]}
   class={classMap({
     [className]: true,
     'mdc-button__label': context === 'button',
@@ -18,13 +18,14 @@
   })}
   {...context === 'snackbar' ? { 'aria-atomic': 'false' } : {}}
   {tabindex}
-  {...$$restProps}><slot /></span
+  {...$$restProps}><slot /></svelte:component
 >
 
 <script>
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import { forwardEventsBuilder, classMap, useActions } from './internal.js';
+  import Span from './Span.svelte';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
@@ -34,10 +35,12 @@
 
   let element;
 
+  export let component = Span;
+
   const context = getContext('SMUI:label:context');
   const tabindex = getContext('SMUI:label:tabindex');
 
   export function getElement() {
-    return element;
+    return element.getElement();
   }
 </script>

packages/common/Em.svelte

@@ -0,0 +1,18 @@
+<em bind:this={element} use:useActions={use} use:forwardEvents {...$$restProps}
+  ><slot /></em
+>
+
+<script>
+  import { get_current_component } from 'svelte/internal';
+  import { forwardEventsBuilder, useActions } from './internal.js';
+
+  export let use = [];
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  let element = null;
+
+  export function getElement() {
+    return element;
+  }
+</script>

packages/common/README.md

@@ -20,6 +20,7 @@ The common label is used everywhere that exports a `Label` component.
 
 ### Props / Defaults
 
+- `component`: `Span` - A component to use as the root element.
 - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
 - `class`: `''` - A CSS class string.
 
@@ -83,6 +84,10 @@ An elemental component for the `button` tag.
 
 An elemental component for the `div` tag.
 
+## Em.svelte
+
+An elemental component for the `em` tag.
+
 ## Footer.svelte
 
 An elemental component for the `footer` tag.
@@ -147,6 +152,10 @@ An elemental component for the `section` tag.
 
 An elemental component for the `span` tag.
 
+## Strong.svelte
+
+An elemental component for the `strong` tag.
+
 ## Svg.svelte
 
 An elemental component for the `svg` tag.
@@ -392,7 +401,7 @@ An action that takes actions and runs them on the element. Used to allow actions
 </div>
 
 <script>
-  import { useActions } from './internal.js';
+  import { useActions } from '@smui/common/internal.js';
 
   export let use = [];
 </script>
@@ -407,7 +416,7 @@ An action that takes actions and runs them on the element. Used to allow actions
 
 <script>
   import MyComponent from './MyComponent.svelte';
-  import SomeAction from './SomeAction.svelte';
-  import SomeOtherAction from './SomeOtherAction.svelte';
+  import SomeAction from './SomeAction.js';
+  import SomeOtherAction from './SomeOtherAction.js';
 </script>
 ```

packages/common/Strong.svelte

@@ -0,0 +1,21 @@
+<strong
+  bind:this={element}
+  use:useActions={use}
+  use:forwardEvents
+  {...$$restProps}><slot /></strong
+>
+
+<script>
+  import { get_current_component } from 'svelte/internal';
+  import { forwardEventsBuilder, useActions } from './internal.js';
+
+  export let use = [];
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  let element = null;
+
+  export function getElement() {
+    return element;
+  }
+</script>