feat(Select): Add Select.ShowError prop which applies the mdc-select--invalid class to the

Author: hobbitronics

components/mdc/Select/Select.svelte

@@ -17,6 +17,8 @@ export let disabled = false
 export let selectedID = ''
 /** @type {boolean} makes a selection required and adds invalid class when none selected */
 export let required = false
+/** @type {boolean} applies the mdc-select--invalid class */
+export let showError = false
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -66,6 +68,7 @@ afterUpdate(() => {
 <div
   class="mdc-select mdc-select--outlined {$$props.class || ''}"
   class:mdc-select--required={required}
+  class:mdc-select--invalid={showError}
   bind:this={element}
   style="width: {width}"
 >

index.d.ts

@@ -239,6 +239,7 @@ declare module '@silintl/ui-components' {
     label?: string
     options?: { name: string; id: string }[]
     required?: boolean
+    showError?: boolean
     selectedID?: string
     width?: string
     class?: string

stories/Select.stories.svelte

@@ -35,3 +35,5 @@ const args = {
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
 
 <Story name="required" args={copyAndModifyArgs(args, { required: true })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />