feat: add label elemental component

Author: hperrin

packages/common/README.md

@@ -113,6 +113,10 @@ An elemental component for the `i` tag.
 
 An elemental component for the `img` tag.
 
+## Label
+
+An elemental component for the `label` tag.
+
 ## Li
 
 An elemental component for the `li` tag.

packages/common/src/elements/Img.svelte

@@ -15,7 +15,7 @@
 
   // Remember to update types file if you add/remove/rename props.
   export let use: ActionArray = [];
-  export let alt = '';
+  export let alt: string | undefined = undefined;
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/common/src/elements/Label.svelte

@@ -0,0 +1,29 @@
+<label
+  bind:this={element}
+  use:useActions={use}
+  use:forwardEvents
+  for={forId}
+  {...$$restProps}
+>
+  <slot />
+</label>
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+
+  import type { ActionArray } from '../internal/useActions.js';
+  import { forwardEventsBuilder, useActions } from '../internal/index.js';
+
+  // Remember to update types file if you add/remove/rename props.
+  export let use: ActionArray = [];
+  let forId: string | undefined = undefined;
+  export { forId as for };
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  let element: HTMLLabelElement;
+
+  export function getElement() {
+    return element;
+  }
+</script>

packages/common/src/elements/Label.types.ts

@@ -0,0 +1,15 @@
+import type Component from './Label.svelte';
+
+export declare class LabelComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLLabelElement>>,
+    'use' | 'for'
+  > &
+    Component['$$prop_def'];
+}

packages/common/src/elements/index.ts

@@ -94,6 +94,12 @@ export * from './Img.types.js';
 const Img = ImgComponent as typeof ImgComponentDev;
 export { Img };
 
+import LabelComponent from './Label.svelte';
+import type { LabelComponentDev } from './Label.types.js';
+export * from './Label.types.js';
+const Label = LabelComponent as typeof LabelComponentDev;
+export { Label };
+
 import LiComponent from './Li.svelte';
 import type { LiComponentDev } from './Li.types.js';
 export * from './Li.types.js';