Create label component

src/lib/components/import/event-history-file-import.svelte

@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation';
 
   import Button from '$lib/holocene/button.svelte';
+  import Label from '$lib/holocene/label.svelte';
   import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
   import { toEventHistory } from '$lib/models/event-history';
@@ -58,9 +59,11 @@
   };
 </script>
 
-<label class="sr-only" for="import-event-history-file-upload">
-  {translate('events.import-event-history-file-upload')}
-</label>
+<Label
+  hidden
+  for="import-event-history-file-upload"
+  label={translate('events.import-event-history-file-upload')}
+/>
 <input
   id="import-event-history-file-upload"
   class="import-input block rounded-md border border-slate-200 p-2"

src/lib/components/schedule/schedule-input-payload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import CodeBlock from '$lib/holocene/code-block.svelte';
+  import Label from '$lib/holocene/label.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
   import { getSinglePayload } from '$lib/utilities/encode-payload';
@@ -16,7 +17,7 @@
 </script>
 
 <div class="flex flex-col gap-4">
-  <label for="schedule-input">{translate('workflows.input')}</label>
+  <Label for="schedule-input" label={translate('workflows.input')} />
   <PayloadDecoder value={payloads} let:decodedValue key="payloads">
     {#key decodedValue}
       <CodeBlock

src/lib/holocene/checkbox.svelte

@@ -7,6 +7,8 @@
   import Icon from '$lib/holocene/icon/icon.svelte';
   import { omit } from '$lib/utilities/omit';
 
+  import Label from './label.svelte';
+
   type T = $$Generic;
 
   interface $$Props extends HTMLInputAttributes {
@@ -35,6 +37,7 @@
   export let valid = true;
   export let error = '';
   export let required = false;
+
   let className = '';
   export { className as class };
 
@@ -75,7 +78,7 @@
   aria-checked={checked}
   tabindex={-1}
 >
-  <label
+  <Label
     class={merge(
       [
         'flex',
@@ -89,9 +92,9 @@
         'group',
       ],
       disabled && 'cursor-not-allowed',
+      hoverable && !disabled && 'hoverable',
       className,
     )}
-    class:hoverable={hoverable && !disabled}
   >
     <input
       on:click
@@ -158,7 +161,7 @@
         {label}
       </span>
     </slot>
-  </label>
+  </Label>
   {#if !valid && error}
     <span class="text-xs text-danger">{error}</span>
   {/if}

src/lib/holocene/combobox/combobox.svelte

@@ -6,6 +6,7 @@
   import { twMerge as merge } from 'tailwind-merge';
 
   import ComboboxOption from '$lib/holocene/combobox/combobox-option.svelte';
+  import Label from '$lib/holocene/label.svelte';
   import MenuContainer from '$lib/holocene/menu/menu-container.svelte';
   import Menu from '$lib/holocene/menu/menu.svelte';
 
@@ -253,14 +254,13 @@
 </script>
 
 <MenuContainer {open} on:close={handleMenuClose}>
-  <label
+  <Label
     class="combobox-label"
-    class:sr-only={labelHidden}
-    class:required
-    for={id}
-  >
+    hidden={labelHidden}
+    {required}
     {label}
-  </label>
+    for={id}
+  />
   <div class="combobox-wrapper" class:disabled class:invalid={!valid}>
     {#if leadingIcon}
       <Icon width={20} height={20} class="ml-2 shrink-0" name={leadingIcon} />

src/lib/holocene/input/chip-input.svelte

@@ -4,6 +4,7 @@
   import { afterUpdate, onDestroy } from 'svelte';
 
   import Chip from '$lib/holocene/chip.svelte';
+  import Label from '$lib/holocene/label.svelte';
 
   export let id: string;
   export let chips: string[];
@@ -90,7 +91,7 @@
 </script>
 
 <div class={$$props.class}>
-  <label class:required class:sr-only={labelHidden} for={id}>{label}</label>
+  <Label {required} {label} hidden={labelHidden} for={id} />
   <div bind:this={inputContainer} class="input-container" class:invalid>
     {#if $values.length > 0}
       {#each $values as chip, i (`${chip}-${i}`)}
@@ -129,14 +130,6 @@
 </div>
 
 <style lang="postcss">
-  label {
-    @apply mb-10 text-sm font-medium text-primary;
-  }
-
-  label.required {
-    @apply after:content-["*"];
-  }
-
   .input-container {
     @apply surface-primary flex max-h-20 min-h-[2.5rem] w-full flex-row flex-wrap gap-1 overflow-y-scroll rounded border border-subtle p-2 text-sm text-primary focus-within:border-4 focus-within:border-blue-700;
 

src/lib/holocene/input/input.svelte

@@ -6,6 +6,7 @@
 
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Label from '$lib/holocene/label.svelte';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
 
   import IconButton from '../icon-button.svelte';
@@ -85,7 +86,7 @@
 </script>
 
 <div class={merge('flex flex-col gap-1', className)}>
-  <label class:required class:sr-only={labelHidden} for={id}>{label}</label>
+  <Label {required} {label} hidden={labelHidden} for={id} />
   <div
     class="input-container"
     class:disabled
@@ -169,14 +170,6 @@
 
 <style lang="postcss">
   /* Base styles */
-  label {
-    @apply font-secondary text-sm font-medium text-primary;
-  }
-
-  label.required {
-    @apply after:content-["*"];
-  }
-
   .input-container {
     @apply surface-input relative box-border inline-flex h-10 w-full items-center rounded border border-subtle text-sm focus-within:shadow-focus focus-within:shadow-primary/50 focus-within:outline-none dark:bg-transparent;
 

src/lib/holocene/input/number-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Label from '$lib/holocene/label.svelte';
 
   export let icon: IconName = null;
   export let id: string;
@@ -11,6 +12,7 @@
   export let placeholder = '';
   export let name = id;
   export let disabled = false;
+  export let required = false;
   export let hintText = '';
   export let max: number = undefined;
   export let min: number = undefined;
@@ -34,7 +36,7 @@
 </script>
 
 <div class={$$props.class}>
-  <label class:sr-only={labelHidden} for={id}>{label}</label>
+  <Label {required} {label} hidden={labelHidden} for={id} />
   <div class="flex items-center gap-2">
     <div
       class="input-container"
@@ -78,10 +80,6 @@
 {/if}
 
 <style lang="postcss">
-  label {
-    @apply mb-10 font-secondary text-sm font-medium text-primary;
-  }
-
   .units {
     @apply font-secondary text-sm font-medium text-primary;
   }

src/lib/holocene/input/range-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from 'svelte/elements';
 
+  import Label from '$lib/holocene/label.svelte';
   import { omit } from '$lib/utilities/omit';
 
   interface $$Props extends HTMLInputAttributes {
@@ -111,9 +112,7 @@
         step={$$props.step}
       />
     </div>
-    <label class:sr-only={labelHidden} class="flex shrink text-sm" for={id}>
-      {label}
-    </label>
+    <Label hidden={labelHidden} class="shrink" {label} for={id} />
   </div>
 </div>
 

src/lib/holocene/label.stories.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+  import type { Meta } from '@storybook/svelte';
+
+  import Label from '$lib/holocene/label.svelte';
+
+  export const meta = {
+    title: 'Label',
+    component: Label,
+    args: {
+      label: 'Label',
+      disabled: false,
+      hidden: false,
+      required: true,
+    },
+    argTypes: {
+      label: { name: 'Label', control: 'text' },
+      disabled: { name: 'Disabled', control: 'boolean' },
+      required: { name: 'Required', control: 'boolean' },
+      hidden: {
+        name: 'Label Hidden',
+        control: 'boolean',
+        table: { category: 'Accessibility' },
+      },
+    },
+  } satisfies Meta<Label>;
+</script>
+
+<Template let:args>
+  <Label {...args} />
+</Template>
+
+<Story name="Light" />
+
+<Story name="Dark" />

src/lib/holocene/label.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { HTMLLabelAttributes } from 'svelte/elements';
+
+  import { twMerge as merge } from 'tailwind-merge';
+
+  type $$Props = HTMLLabelAttributes & {
+    label?: string;
+    hidden?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    'data-testid'?: string;
+  };
+
+  export let label = '';
+  export let hidden = false;
+  export let required = false;
+  export let disabled = false;
+
+  let className = '';
+  export { className as class };
+</script>
+
+<label
+  class={merge(
+    'inline-flex',
+    'flex-row',
+    'items-center',
+    'grow',
+    'cursor-pointer',
+    'gap-2',
+    'text-primary',
+    'text-sm',
+    'font-secondary',
+    'font-medium',
+    'focus:outline-none',
+    hidden && 'sr-only',
+    disabled && 'cursor-not-allowed',
+    className,
+  )}
+  data-required={required}
+  {...$$restProps}
+>
+  <slot><span>{label}</span></slot>
+  {#if required}
+    <span class="h-1.5 w-1.5 rounded-full bg-interactive-required" />
+  {/if}
+</label>

src/lib/holocene/radio-input/radio-input.svelte

@@ -3,6 +3,8 @@
 
   import { getContext } from 'svelte';
 
+  import Label from '$lib/holocene/label.svelte';
+
   import type { RadioGroupContext, RadioInputProps } from './types';
 
   import { RADIO_GROUP_CONTEXT } from './radio-group.svelte';
@@ -32,7 +34,7 @@
 </script>
 
 <div class="flex flex-col gap-1">
-  <label class:disabled>
+  <Label {disabled}>
     <input
       bind:group={$group}
       type="radio"
@@ -47,7 +49,7 @@
     <span class="label" class:hidden={labelHidden}>
       {label}
     </span>
-  </label>
+  </Label>
   {#if description}
     <p class="description" id="{id}-description">
       {description}
@@ -60,14 +62,6 @@
     @apply ml-[26px] text-xs font-normal text-primary;
   }
 
-  label {
-    @apply flex grow cursor-pointer flex-row items-center gap-2 text-sm font-normal text-primary focus:outline-none;
-
-    &.disabled {
-      @apply cursor-not-allowed;
-    }
-  }
-
   input[type='radio'] {
     @apply relative box-content h-4 w-4 min-w-[16px] cursor-pointer appearance-none rounded-full border-2 border-subtle outline outline-4 outline-transparent dark:text-black;
 

src/lib/holocene/select/select.svelte

@@ -28,6 +28,7 @@
 
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Label from '$lib/holocene/label.svelte';
   import { Menu, MenuButton, MenuContainer } from '$lib/holocene/menu';
   import type { MenuButtonVariant } from '$lib/holocene/menu/menu-button.svelte';
 
@@ -97,9 +98,7 @@
 </script>
 
 <MenuContainer class="w-full" {open}>
-  <label class="text-sm text-primary" class:sr-only={labelHidden} for={id}
-    >{label}</label
-  >
+  <Label {label} hidden={labelHidden} for={id} />
   <MenuButton
     hasIndicator={!disabled}
     {disabled}

src/lib/holocene/select/simple-select.svelte

@@ -3,6 +3,7 @@
 
   import { twMerge as merge } from 'tailwind-merge';
 
+  import Label from '$lib/holocene/label.svelte';
   import type { SelectOptionValue } from '$lib/types/global';
 
   import Option from './simple-option.svelte';
@@ -25,11 +26,12 @@
   export let label: string = null;
   export let arrow = false;
   export let name = id;
+  export let required = false;
   export let options: SelectOptionValue[] = [];
 </script>
 
 <div>
-  <label class="sr-only" for={id}>{label}</label>
+  <Label {required} {label} for={id} />
   <select
     class={merge(
       'inline h-10 w-full rounded-lg border px-2 text-base',