Add required prop to Select. (#968)

Upgrade sveld to set paths correctly on Windows.
Make Prettier script compatible with Windows and run it.

src/CodeSnippet/CodeSnippet.svelte

@@ -150,14 +150,10 @@
       feedback="{feedback}"
       feedbackTimeout="{feedbackTimeout}"
       class="bx--snippet {type && `bx--snippet--${type}`}
-          {type ===
-        'inline' && 'bx--btn--copy'}
-          {expanded &&
-        'bx--snippet--expand'}
-          {light &&
-        'bx--snippet--light'}
-          {hideCopyButton &&
-        'bx--snippet--no-copy'}
+          {type === 'inline' && 'bx--btn--copy'}
+          {expanded && 'bx--snippet--expand'}
+          {light && 'bx--snippet--light'}
+          {hideCopyButton && 'bx--snippet--no-copy'}
           {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
@@ -194,8 +190,7 @@
       class:bx--snippet-container="{true}"
       style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
     >
-      <pre
-        bind:this="{ref}">
+      <pre bind:this="{ref}">
         <code><slot>{code}</slot></code>
       </pre>
     </div>

src/DatePicker/DatePicker.svelte

@@ -229,8 +229,7 @@
     class:bx--date-picker="{true}"
     class:bx--date-picker--short="{short}"
     class:bx--date-picker--light="{light}"
-    class="{datePickerType &&
-      `bx--date-picker--${datePickerType}`}
+    class="{datePickerType && `bx--date-picker--${datePickerType}`}
       {datePickerType === 'range' &&
       $labelTextEmpty &&
       'bx--date-picker--nolabel'}"

src/Dropdown/Dropdown.svelte

@@ -170,14 +170,10 @@
       'bx--dropdown--invalid'} {!invalid &&
       warn &&
       'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
-      {size ===
-      'sm' && 'bx--dropdown--sm'}
-      {size === 'xl' &&
-      'bx--dropdown--xl'}
-      {inline &&
-      'bx--dropdown--inline'}
-      {disabled &&
-      'bx--dropdown--disabled'}
+      {size === 'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' && 'bx--dropdown--xl'}
+      {inline && 'bx--dropdown--inline'}
+      {disabled && 'bx--dropdown--disabled'}
       {light && 'bx--dropdown--light'}"
     on:click="{({ target }) => {
       open = ref.contains(target) ? !open : false;

src/MultiSelect/MultiSelect.svelte

@@ -280,14 +280,10 @@
     warnText="{warnText}"
     class="bx--multi-select {direction === 'top' &&
       'bx--list-box--up'} {filterable && 'bx--combo-box'}
-      {filterable &&
-      'bx--multi-select--filterable'}
-      {invalid &&
-      'bx--multi-select--invalid'}
-      {inline &&
-      'bx--multi-select--inline'}
-      {checked.length > 0 &&
-      'bx--multi-select--selected'}"
+      {filterable && 'bx--multi-select--filterable'}
+      {invalid && 'bx--multi-select--invalid'}
+      {inline && 'bx--multi-select--inline'}
+      {checked.length > 0 && 'bx--multi-select--selected'}"
   >
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />

src/ProgressIndicator/ProgressStep.svelte

@@ -95,8 +95,7 @@
         <title>{description}</title>
         <path
           d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
-          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
-        ></path>
+          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
       </svg>
     {/if}
     <slot props="{{ class: 'bx--progress-label' }}">

src/Select/Select.svelte

@@ -60,6 +60,9 @@
   /** Obtain a reference to the select HTML element */
   export let ref = null;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
@@ -112,6 +115,7 @@
             aria-describedby="{invalid ? errorId : undefined}"
             aria-invalid="{invalid || undefined}"
             disabled="{disabled || undefined}"
+            required="{required || undefined}"
             id="{id}"
             name="{name}"
             class:bx--select-input="{true}"
@@ -156,6 +160,7 @@
           name="{name}"
           aria-describedby="{invalid ? errorId : undefined}"
           disabled="{disabled || undefined}"
+          required="{required || undefined}"
           aria-invalid="{invalid || undefined}"
           class:bx--select-input="{true}"
           class="{size && `bx--select-input--${size}`}"

src/TextInput/PasswordInput.svelte

@@ -198,10 +198,8 @@
         class:bx--btn--disabled="{disabled}"
         class:bx--tooltip__trigger="{true}"
         class:bx--tooltip--a11y="{true}"
-        class="{tooltipPosition &&
-          `bx--tooltip--${tooltipPosition}`}
-        {tooltipAlignment &&
-          `bx--tooltip--align-${tooltipAlignment}`}"
+        class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
+        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
         on:click="{() => {
           type = type === 'password' ? 'text' : 'password';
         }}"

src/TreeView/TreeViewNode.svelte

@@ -55,13 +55,8 @@
   let refLabel = null;
   let prevActiveId = undefined;
 
-  const {
-    activeNodeId,
-    selectedNodeIds,
-    clickNode,
-    selectNode,
-    focusNode,
-  } = getContext("TreeView");
+  const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
+    getContext("TreeView");
   const offset = () =>
     computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);